<template>
	<draggable :list="content" group="default" class="xw-draggable" :animation="300">
		<el-col :span="item.rule.col" v-for="(item,index) in list" :key='index' v-if="item.name!='row'"
			:class="{'xw-draggable_box':1, 'xw-draggable_active':activeDraggable==index}">
			<el-form-item :label-width="item.rule.showLable?item.rule.lableWidth:'0'" :prop="item.rule.field">
				<span slot='label' v-if="item.rule.showLable">
					<el-tooltip :content="item.rule.info" v-if="item.rule.info">
						<i class="el-icon-warning"></i>
					</el-tooltip>
					{{item.rule.title}}
				</span>
				<XwElement v-bind="item.rule" />
			</el-form-item>
			<div class="xw-draggable_mask" @click.stop="draggable(index,item)"></div>
			<div class="xw-draggable_right" v-if="activeDraggable==index">
				<i class="xw-icon icon-copy" @click="copy(item)"></i>
				<i class="xw-icon icon-delete" @click="del(index)"></i>
			</div>
		</el-col>
		<el-row style="min-height: 100px;" class="el-form-item" v-else>
			<draggable :list="content" group="default" :animation="300">
				<el-col :span="item.rule.col" v-for="(item,index) in list" :key='index'
					:class="{'xw-draggable_box':1, 'xw-draggable_active':activeDraggable==index}">
					<el-form-item :label-width="item.rule.showLable?item.rule.lableWidth:'0'" :prop="item.rule.field">
						<span slot='label' v-if="item.rule.showLable">
							<el-tooltip :content="item.rule.info" v-if="item.rule.info">
								<i class="el-icon-warning"></i>
							</el-tooltip>
							{{item.rule.title}}
						</span>
						<XwElement v-bind="item.rule" />
					</el-form-item>
					<div class="xw-draggable_mask" @click.stop="draggable(index,item)"></div>
					<div class="xw-draggable_right" v-if="activeDraggable==index">
						<i class="xw-icon icon-copy" @click="copy(item)"></i>
						<i class="xw-icon icon-delete" @click="del(index)"></i>
					</div>
				</el-col>
			</draggable>
			<!-- <xw-draggable ref='XwDraggable' @draggable='draggable' /> -->
		</el-row>
	</draggable>
</template>

<script>
	export default {
		data() {
			return {
				activeDraggable: null,
				content: [],
			}
		},
		computed: {
			list() {
				return this.content.map(item => {
					return {
						...item,
						props: item.props(),
						rule: item.rule()
					}
				})
			}
		},
		methods: {
			init(e) {
				console.log(this.list)
				if (e.type == 'field') this.$set(this.list[this.activeDraggable].rule, e.key, e.value)
				else if (e.type == 'other') this.$set(this.list[this.activeDraggable].rule.props, e.key, e.value)
				this.$forceUpdate()
			},
			draggable(index, item) {
				this.activeDraggable = index
				this.$emit('draggable', item)
			},
			del(index) {
				this.activeDraggable = null
				this.content.splice(index, 1)
				this.$emit('draggable', null)
			},
			copy(item = {}) {
				console.log(this.list)
				this.content.push(item)
			},
		}
	}
</script>

<style lang="scss">
	.xw-draggable {

		.components-body {
			padding: 0;
			margin: 0;
			font-size: 0;
		}

		.sortable-ghost {
			// position: relative;
			display: block;
			overflow: hidden;
			// &::before {
			//   content: " ";
			//   position: absolute;
			//   left: 0;
			//   right: 0;
			//   top: 0;
			//   height: 3px;
			//   background: rgb(89, 89, 223);
			//   z-index: 2;
			// }
		}

		&_box {
			position: relative;
			// padding: 1px;
			// margin-bottom: 5px;

			.el-form-item {
				padding: 12px 10px;
				margin-bottom: 18px;
				border: 1px dashed var(--xw-color-primary);
			}
		}

		&_mask {
			cursor: move;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1999;
		}

		&_active {
			.el-form-item {
				border-style: double;
			}
		}

		&_left {
			position: absolute;
			padding: 5px;
			top: 0;
			color: #fff;
			background: var(--xw-color-primary);
		}

		&_right {
			position: absolute;
			bottom: 20px;
			right: 10px;
			z-index: 2000;

			i {
				cursor: pointer;
				padding: 2px;
				color: #fff;
				background: var(--xw-color-primary);
				margin-right: 5px;
			}

			.icon-delete {
				background: red;
			}
		}
	}
</style>